<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"鞋梦弄潮"商城账号-登录</title>
    <link rel="stylesheet" href="login/login.css">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>
<div class="left-pic">
    <img src="login/img/denglu-left.jpg" alt="">
</div>
<div class="header">
    <div class="header-left">
        <img src="login/img/denglu-milogo.jpg" alt="">
        <p>"鞋梦弄潮"商城</p>
    </div>
</div>
<div class="content">
    <div class="wrap">
        <div class="content-body">
            <div class="content-nav-list">
                <ul>
                    <li class="denglu active"><a href="javascript:;" data-target="loginForm">登录</a></li>
                    <li class="zhuce"><a href="javascript:;" data-target="registerForm">注册</a></li>
                </ul>
            </div>
            <div style="clear:both;"></div>
            <div class="content-miform">
                <!-- 登录表单 -->
                <form id="loginForm">
                    <input type="text" name="username" class="miform" placeholder="邮箱/手机号/商城用户名" id="username">
                    <input type="password" name="password" class="miform" placeholder="密码" id="password">
                    <div class="accept">
                        <input type="checkbox" id="agreeCheckbox">
                        <span>我已阅读并同意账号用户协议和隐私政策</span>
                    </div>
                    <button class="login-btn" type="button">登录</button>
                </form>
                <!-- 注册表单 -->
                <form id="registerForm" style="display: none;">
                    <input type="text" name="regUsername" class="miform" placeholder="请输入注册用户名">
                    <input type="password" name="regPassword" class="miform" placeholder="请输入注册密码">
                    <input type="password" name="confirmPassword" class="miform" placeholder="确认密码">
                    <input type="text" name="regEmail" class="miform" placeholder="请输入邮箱">

                    <div class="accept">
                        <input type="checkbox" id="regAgreeCheckbox">
                        <span>我已阅读并同意账号用户协议和隐私政策</span>
                    </div>
                    <div><button class="register-btn" type="button">注册</button></div>
                </form>


            </div>
        </div>
    </div>
</div>


<script src="login/value.js"></script>
<script src="login/language.js"></script>
<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const layer = layui.layer;

    // 监听登录和注册导航项的点击事件
    $(".content-nav-list a").click(function (e) {
        e.preventDefault();
        // 移除所有导航项的 active 类
        $(".content-nav-list li").removeClass("active");
        // 给当前点击的导航项添加 active 类
        $(this).parent().addClass("active");
        // 获取要显示的表单的 ID
        const target = $(this).data("target");
        // 隐藏所有表单
        $(".content-miform form").hide();
        // 显示目标表单
        $(`#${target}`).show();
    });

    $(".login-btn").click(function () {
        // 验证数据
        let username = $("[name='username']").val();
        let password = $("[name='password']").val();
        let reg = /^[a-zA-Z0-9]{6,16}$/;
        if (reg.test(username) && reg.test(password)) {
            // 登录操作
            $.ajax({
                url: 'shopping/dologin',
                data: { username: username, password: password },
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg("登录成功", { icon: 1 });
                        setTimeout(function () {
                            location.href = "shopping/index";
                        }, 1800);
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        } else {
            layer.msg("用户名和密码必须是 6 - 16 位字符数字");
            return;
        }
    });

    // 注册按钮点击事件（可根据实际需求完善注册逻辑）
    $(".register-btn").click(function () {
        let regUsername = $("[name='regUsername']").val();
        let regPassword = $("[name='regPassword']").val();
        let confirmPassword = $("[name='confirmPassword']").val();
        let regEmail = $("[name='regEmail']").val();

        if (regPassword!== confirmPassword) {
            layer.msg("两次输入的密码不一致");
            return;
        }

        let reg = /^[a-zA-Z0-9]{6,16}$/;
        let emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailReg.test(regEmail)){
            layer.msg("邮箱格式错误！！！");
            return;
        }
        if (reg.test(regUsername) && reg.test(regPassword)) {
            // 登录操作
            $.ajax({
                url: 'shopping/doregister',
                data: { username: regUsername, password: regPassword ,email:regEmail},
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg("注册成功", { icon: 1 });
                        setTimeout(function () {
                            location.href = "shopping/login";
                        }, 1800);
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        } else {
            layer.msg("用户名和密码必须是 6 - 16 位字符数字");
            return;
        }

    });



    //监听注册用的，  按钮变色
    const form3 = document.querySelector('#registerForm');
    const regUsername1 = document.querySelector("[name='regUsername']");
    const regPassword1 = document.querySelector("[name='regPassword']");
    const confirmPassword1 = document.querySelector("[name='confirmPassword']");
    const regEmail1 = document.querySelector("[name='regEmail']");
    const regAgreeCheckbox1 = document.querySelector('#regAgreeCheckbox');
    const registerBtn1 = document.querySelector('.register-btn');


    // 监听输入框和勾选框的变化，动态启用/禁用登录按钮
    form3.addEventListener('input', () => {
        if (regUsername1.value && regPassword1.value && confirmPassword1.value && regAgreeCheckbox1.checked && regEmail1.value) {
            registerBtn1.disabled = false;
            registerBtn1.style.backgroundColor = '#ff6700';
        } else {
            registerBtn1.disabled = true;
            registerBtn1.style.backgroundColor = '#ffc5c2';
        }
    });
</script>
</body>

</html>